<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../plugin/layui-v2.2.5/layui/css/layui.css">
</head>
<body>  

<div class="layui-row">
	<div class="layui-col-md6 layui-form" style="float:right">
		<button id="search" data-method="search" class="layui-btn" style="float: right;margin-left: 10px">搜索</button>   
		<div class="layui-col-md6" style="float:right">
			<select name="period" id="period" lay-verify="required" lay-search lay-filter="period" style="width:20px">
            	<option value=""></option>
         	</select>
		</div> 
    </div>
</div>
<table class="layui-table" id='document' lay-filter="document">
</table>


<script id="barDemo" type="text/html">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>
  <a class="layui-btn layui-btn-xs" lay-event="submit" value='{{d.status}}' {{ d.status == '未提交' ? '' : 'style="display:none"' }}>提交</a>

</script>
               
          
<script src="../plugin/layui-v2.2.5/layui/layui.js"></script>
<script src="../plugin/jquery-3.1.1.min.js"></script>
<script>
layui.use(['table','form'], function(){
  var table = layui.table;
  var form = layui.form;
  //记录页码用于重载定位
  var pageNum = 0;
  
  table.render({
    elem: '#document'
    ,id : 'document'
    ,url : '/CMA/courseDocument/getAlSubmitDocument'
    ,method : 'post'
    ,done: function(res, curr, count){
    	pageNum = curr;
    }
    ,cols: [[ //标题栏
      //{type:'checkbox',fixed: 'left'},
      {field:'courseName',title:'课程名', sort: true, fixed: true}
      ,{field:'className',title:'授课班级'}
      ,{field:'status', sort: true,title:'状态'}
      ,{fixed: 'right', align:'center', toolbar: '#barDemo'}
    ]]
    ,skin: 'line' //表格风格
    ,even: true
    ,page: true //是否显示分页
    ,limits: [5, 7, 10]
    ,limit: 5 //每页默认显示的数量
  });

  //监听表格复选框选择
  table.on('checkbox(document)', function(obj){
    console.log(obj)
  });
  //监听工具条
  table.on('tool(document)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
    	//查看详情操作
    	layer.open({
        type: 1
        ,title: false //不显示标题栏
        ,closeBtn: false
        ,area: '650px;'
        ,shade: 0.8
        ,id: 'document_detail' //设定一个id，防止重复弹出
        ,btn: ['确定']
        ,btnAlign: 'c'
        ,moveType: 1 //拖拽模式，0或者1
        ,content: '<div><table class="layui-table"><thead><tr><th>课程名称</th><th>班级</th><th>任课教师</th><th>教师工号</th>'
	        +'<th>材料类型</th><th>备注</th><th>学期</th></tr> </thead><tbody><tr><td>'+data.courseName+'</td>'
	        +'<td>'+data.className+'</td><td>'+data.teaherName+'</td><td>'+data.workId+'</td>'
	        +'<td>'+data.documenttype+'</td><td>'+data.remark+'</td><td>'+data.period+'</td></tr></tbody></table></div>'
      });
    } else if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'submit'){
    	//表格中的提交操作
    	$.ajax({ 
        	url: "/CMA/courseDocument/changeStatus",
        	contentType: "application/x-www-form-urlencoded",
        	type:"post",
        	dataType : "json",
        	data : {
        		id : data.id,
        		oldStatus : data.status
        	},
        	success: function(data){
        		//alert(data.msg);
        		if(data.msg=="success"){
        			table.reload('document', {
        	    		  where: { //设定异步数据接口的额外参数，任意设
        	    		  }
        	    		  ,page: {
        	    		    curr: pageNum //重新从第 1 页开始
        	    		  }
        	    	});
        		}
        	},
        	error : function(){
        		alert("error");
        	}
          });
      //layer.alert('编辑行：<br>'+ JSON.stringify(data))
    }
  });
  
  var selectVal = "";
  form.on('select(period)', function(data){
	  //console.log(data.value); //得到被选中的值
	  selectVal = data.value;
	});  
  
  $("#search").on("click",function(){
	  	table.reload('document', {
	  		  where: { //设定异步数据接口的额外参数，任意设
	  		    key: selectVal
	  		    //…
	  		  }
	  		  ,page: {
	  		    curr: 1 //重新从第 1 页开始
	  		  }
	  	});
  });
  
  $.ajax({ 
	  	url: "/CMA/courseDocument/getPeriod",
	  	contentType: "application/x-www-form-urlencoded",
	  	type:"post",
	  	dataType : "json",
	  	success: function(data){
	  		//alert(data.msg);
	  		if(data.result=="success"){
	  			console.log(data.data);
	  			var periodList = data.data;
	  			var selectText = "";
	  			for(var i = 0; i < periodList.length; i++ ){ 
	  				selectText = selectText + "<option value="+periodList[i].period+">"+periodList[i].period+"</option>";
	  			}
	  			$("#period").append(selectText);
	  			form.render('select');
	  		}else{
	  			
	  		}
	  	},
	  	error : function(){
	  		alert("error");
	  	}
	    });

});
</script>

</body>
</html>